<template>
  <el-dialog class="linkDialog" :title="'选择链接'" v-model="visible" width="45%" center :close-on-click-modal="false" :show-close="true" :close-on-press-escape="false">
    <div class="box">
      <el-tabs v-model="LinkData.activeName" v-if="(linkType & 0b11) === 0b11" type="card">
        <el-tab-pane v-if="(linkType & 0b01) === 0b01" label="店铺链接" name="storelink" />
        <el-tab-pane v-if="(linkType & 0b10) === 0b10" label="商品链接" name="goodslink" />
      </el-tabs>
      <div v-if="LinkData.activeName === 'storelink'">
        <el-form :inline="true" ref="form" class="form">
          <el-form-item label="商品类目">
            <el-select class="boss_input" v-model="LinkData.search.goodsType" placeholder="请选择类目" clearable>
              <el-option label="器械" value="INSTRUMENT" />
              <el-option label="高值耗材" value="HCONSUMABLES" />
              <el-option label="低值耗材" value="LCONSUMABLES" />
              <el-option label="试剂" value="REAGENT" />
              <el-option label="常规" value="CONVENTION" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input class="boss_input" v-model="LinkData.search.supplierName" placeholder="输入供应商名称" clearable />
          </el-form-item>
          <el-form-item>
            <Button label="重置" @click="onResetClick" />
            <Button label="搜索" type="primary" @click="onQueryClick" />
          </el-form-item>
        </el-form>
        <el-table :data="LinkData.supplierList" height="400">
          <el-table-column prop="supplierName" label="供应商" />
          <el-table-column prop="goodsType" :formatter="(row, column, cellValue, index) => $formater.formaterGoodsType(cellValue)" label="类目" />
          <el-table-column prop="status" :formatter="(row, column, cellValue, index) => $formater.formaterAccountStatus(cellValue)" label="状态" />
          <el-table-column label="操作">
            <template #default="scope">
              <Link label="选择链接" @click="onSelLinkClick(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <Pager :page="LinkData.search.page" :pageSizes="LinkData.search.pageSizes" @current-change="onCurrentChange" :total="LinkData.total" :limit="LinkData.search.limit" @size-change="onSizeChange1" />
      </div>
      <div v-else>
        <el-form class="form" :inline="true" ref="form" :model="goods.search" label-width="80px" >
          <el-form-item label="商品分组">
            <el-cascader class="boss_input" v-model="goods.search.goodsCatIds" placeholder="请选择商品分组" :options="cateOptions" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select class="boss_input" v-model="goods.search.supplierId" placeholder="请选择供应商" clearable filterable>
              <el-option v-for="item in LinkData.supplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId">
                <span style="float: left">{{ item.supplierName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input class="boss_input" v-model="goods.search.goodsName" placeholder="输入商品名称" clearable />
          </el-form-item>
          <el-form-item>
            <Button label="重置" @click="onResetForm" />
            <Button label="搜索" type="primary" @click="onSearchClick" />
          </el-form-item>
        </el-form>

        <el-table :data="goods.list" height="400">
          <el-table-column label="商品图片">
            <template #default="scope">
              <img class="img" :src="scope.row.goodsImg?.split(',')[0]" />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" />
          <el-table-column prop="supplierName" label="所属供应商" />
          <el-table-column prop="goodsStatus" :formatter="(row, column, cellValue, index) => (cellValue === 'PUTON' ? '上架' : '下架')" label="状态" />
          <el-table-column label="价格">
            <template #default="scope">
<!-- .goodsSpecList[0]?.goodsSalesPrice -->
              <span style="display: inline-block; width: 70px">{{ scope.row.goodsSalesPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <Link label="选择链接" @click="onSelLinkClick(scope.row)" />
            </template>
          </el-table-column>
        </el-table>

        <Pager :page="goods.search.page" :pageSizes="LinkData.search.pageSizes" @current-change="onCurrentChange1" :total="goods.total" :limit="goods.search.limit" @size-change="onSizeChange2" />
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'

const def = {
  0b11: 'storelink',
  0b01: 'storelink',
  0b10: 'goodslink'
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  linkType: {
    type: Number,
    default: 0b11
  }
})
const emit = defineEmits(['update:visible', 'change'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const LinkData = reactive({
  total: 0,
  activeName: def[props.linkType],
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    goodsType: '',
    supplierName: ''
  },

  supplierList: []
})

const goods = reactive({
  total: 0,
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    supplierId: '',
    goodsCatIds: [],
    goodsCatIdFirst: '',
    goodsCatIdSecond: '',
    goodsCatIdThree: '',
    goodsName: ''
  }
})

let cateOptions = ref([])

const getAllGoodsCategory = async () => {
  let { data } = await api.get(`/medinstrument/boss/goodsCategory/getAllGoodsCategory`)

  // const cates = Object.keys(consts.GoodsType).map((key) => ({ label: consts.GoodsType[key], value: key }))

  // cates.forEach((e) => {
  //   e.children = data.result[e.value]?.map((c2) => {
  //     return {
  //       label: c2.catName,
  //       value: c2.catId,
  //       children: c2.categoryChilden?.map((c3) => ({ label: c3.catName, value: c3.catId }))
  //     }
  //   })
  // })
  // cateOptions.value = cates

  cateOptions.value = data.result?.map((c1) => {
    return {
      label: c1.catName,
      value: c1.catId,
      children: c1.categoryChilden?.map((c2) => {
        return {
          label: c2.catName,
          value: c2.catId,
          children: c2.categoryChilden?.map((c3) => ({ label: c3.catName, value: c3.catId }))
        }
      })
    }
  })
}

const supplierData = async () => {
  let { data, err } = await api.get('/medinstrument/boss/supplier/list', LinkData.search)
  if (err) {
    ElMessage.error(err)
  } else {
    LinkData.supplierList = data.list
    LinkData.total = data.count
  }
}

const goodsData = async () => {
  let params = Object.assign({}, goods.search)
  if (goods.search.goodsCatIds) {
    // params.goodsCatIdFirst = goods.search.goodsCatIds[1]
    // params.goodsCatIdSecond = goods.search.goodsCatIds[2]
    params.goodsCatIdThird = goods.search.goodsCatIds[2]
  }

  delete params.goodsCatIds
  let { data, err } = await api.get(`/medinstrument/boss/goods/list`, params)
  if (err) {
    ElMessage.error(err)
  } else {
    goods.list = data.list
    goods.total = data.count
  }
}

const onQueryClick = () => {
  LinkData.search.page = 1
  supplierData()
}

const onSearchClick = () => {
  goods.search.page = 1
  goodsData()
}

const onResetClick = () => {
  LinkData.search = {}
  supplierData()
}

const onResetForm = () => {
  goods.search = {}
  goods.search.goodsCatIds = []
}

const onSelLinkClick = (row) => {
  emit('change', row)
  visible.value = false
}

const onCurrentChange = (val) => {
  LinkData.search.page = val
  supplierData()
}

const onSizeChange1 = (val) => {
  LinkData.search.limit = val
  supplierData()
}

const onCurrentChange1 = (val) => {
  goods.search.page = val
  goodsData()
}

const onSizeChange2 = (val) => {
  goods.search.limit = val
  goodsData()
}

onMounted(() => {
  supplierData()
  getAllGoodsCategory()
  goodsData()
})
</script>

<style scoped lang="scss">
.box {
  // height: 600px;
  // overflow: hidden;
  // padding-bottom: 20px;
  .boss_input{
    width: 215px !important;
  }

  .form {
    margin-top: 20px;
  }

  .img {
    width: 70px;
    height: 70px;
  }
}
</style>
<style>
.linkDialog {
  margin-top: 2vh !important;
}

.el-overlay-dialog {
  overflow: hidden;
}
</style>
